<!--项目详情-详细信息-->
<template>
  <div class="base-info">
    <div class="info">
      <div class="right-info">
        <el-row v-for="(array, i) in topInfo" :key="i">
          <el-col
            v-for="(el, j) in array"
            :key="j"
            :span="24 / array.length"
            style="display: inline-flex"
          >
            <span class="label">{{ el.label }}：</span>
            <el-button
              v-if="el.dataType.includes('TypeInstanceIdentifier')"
              type="primary"
              link
              @click="openOther(el)"
            >
              {{ el.displayValue }}
            </el-button>
            <span v-else class="value">{{ el.displayValue }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <BaseInfo :="attrs" :formList="formList"></BaseInfo>
  </div>
</template>

<script setup>
import { useConvertForm } from '@/hooks';
import BaseInfo from '@/views/components/baseInfo.vue';

const attrs = useAttrs();
const route = useRoute();
const { commonApi } = window.$api;
const formList = ref([]);
const classifyList = ref([]);

const topInfo = ref([]);
onMounted(() => {
  getInfoLayout();
});

/**
 * 获取详情
 * */
const getInfoLayout = () => {
  const params = {
    serviceKey: 'Default',
    oid: route.query.oid,
  };
  commonApi.getInfoLayout(params).then((res) => {
    const currFormList = [];
    res.data.map((item) => {
      if (item.groupName === '常规') {
        const rows = Array.from(new Set(item.items.map((el) => el.row)));
        rows.map((row) => {
          const arr = item.items.filter((el) => el.row === row);
          topInfo.value.push(arr);
        });
      } else {
        currFormList.push(item);
      }
    });
    formList.value = useConvertForm(currFormList);
    const classification = computed(() => {
      const general = currFormList.find((item) => item.name === '常规');
      return general?.list?.flat().find((item) => item.name === 'Classification');
    });
    classification.value && getClassificationInfoLayout(classification?.value);
  });
};
const openOther = (item) => window.open(item.value);

const getClassificationInfoLayout = (nodeInterName) => {
  const params = {
    serviceKey: 'Default',
    oid: route.query.oid,
    nodeInterName,
  };
  commonApi.getClassificationInfoLayout(params).then((res) => {
    if (res.data) {
      classifyList.value = useConvertForm(res.data);
    }
  });
};
</script>

<style lang="less" scoped>
.base-info {
  background-color: var(--el-fill-color-blank);
  height: 100%;
  overflow-y: auto;
  .info {
    display: flex;
    padding: 10px 0;
    position: relative;
    .pdf-preview {
      position: absolute;
      left: 0;
      top: 0;
      width: 150px;
      height: 180px;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      letter-spacing: 2px;
      cursor: pointer;
    }
    .el-image {
      width: 150px;
      height: 150px;
      margin-right: 20px;
      border-radius: 4px;
    }
    .right-info {
      display: flex;
      flex: auto;
      flex-direction: column;
      // justify-content: space-between;
    }
  }
}
</style>
